<template>
  <div class="">
    <el-card class="box-card"
             shadow='hover'>
      <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{'name':'Classes' }">班级管理</el-breadcrumb-item>
        <el-breadcrumb-item :to="{'name':'Students' }">学生管理</el-breadcrumb-item>

      </el-breadcrumb>

      <el-row :gutter="110">
        <el-col :span='2'>
          <el-button type="primary"
                     @click="dialogVisible = true"
                     size="small"><i class="el-icon-plus"></i>添加班级</el-button>
        </el-col>

      </el-row>
      <el-table :data="classData"
                class='class-table'
                stripe
                border>
        <el-table-column type="selection"
                         width="55">
        </el-table-column>
        <el-table-column type="index"
                         width="60"
                         label="序 号"
                         align="center">
        </el-table-column>
        <el-table-column label="班级名称"
                         prop="name"
                         align="center"
                         width="200">
        </el-table-column>
        <el-table-column label="口号"
                         prop="slogan"
                         align="center">
        </el-table-column>
        <el-table-column label="学生管理"
                         align="center"
                         width='200'>
          <template slot-scope="scope">
            <el-button @click='pushtoStudent(scope.row)'>学生管理</el-button>

          </template>
        </el-table-column>
        <el-table-column label="操 作"
                         align="center"
                         width="200">

          <template slot-scope="scope">
            <el-button type="warning"
                       size="mini"
                       @click='editclass(scope.row)'>修改</el-button>
            <el-button type="danger"
                       size="mini"
                       @click='handleDelete(scope.row.id)'>删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 弹框区 -->
      <el-dialog title="添加班级"
                 :visible.sync="dialogVisible"
                 width="400px"
                 center>
        <!-- 对话框主体 -->
        <div class="dialog-info">
          <el-form :model="classForm"
                   ref='classForm'
                   label-width="80px"
                   :rules="singerRules">
            <el-form-item label="班级名称"
                          size="mini"
                          prop="name">
              <el-input v-model="classForm.name"
                        placeholder="请输入班级名"></el-input>
            </el-form-item>
            <el-form-item label="口号"
                          size="mini"
                          prop="slogan">
              <el-input v-model="classForm.slogan"
                        placeholder="请输入口号"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <span slot="footer"
              class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary"
                     @click='submitClassInfo'>确 定</el-button>
        </span>
      </el-dialog>
      <!-- 修改班级对话框 -->
      <el-dialog title="修改班级"
                 :visible.sync="editDialogVisible"
                 width="400px"
                 center>
        <!-- 对话框主体 -->
        <div class="dialog-info">
          <el-form :model="classForm"
                   ref='classForm'
                   label-width="80px"
                   :rules="singerRules">
            <el-form-item label="班级名称"
                          size="mini"
                          prop="name">
              <el-input v-model="classForm.name"
                        placeholder="请输入班级名"></el-input>
            </el-form-item>
            <el-form-item label="口号"
                          size="mini"
                          prop="slogan">
              <el-input v-model="classForm.slogan"
                        placeholder="请输入口号"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <span slot="footer"
              class="dialog-footer">
          <el-button @click="editDialogVisible = false">取 消</el-button>
          <el-button type="primary"
                     @click='submiteditClassInfo'>确 定</el-button>
        </span>
      </el-dialog>

    </el-card>
  </div>
</template>

<script>
import { getClassesInfo, addClass, editClass, delClass } from '../../api/apiRequest'

export default {
  data () {
    return {
      dialogVisible: false,
      classForm: {
        name: '',
        slogan: '',

      },
      singerRules: {
        name: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { min: 2, max: 10, message: '长度在 2 到 10 个字符', trigger: 'blur' }
        ],
        sex: [
          { required: true, message: '请选择一个', trigger: 'change' }
        ]
      },
      classData: [],
      tempsingerData: [],
      //分页区
      total: 0,
      page: 1,
      page_size: 5,
      //过滤区
      search: '',
      //排序区
      ordering: '',
      //修改歌手对话框
      editDialogVisible: false,
      singerID: 0,
      //批量删除区
      collection: []
    };
  },
  mounted () {
    this.getClassesData()
  },


  methods: {
    //获取班级数据
    async getClassesData () {
      const { data: res } = await getClassesInfo()
      this.classData = res

    },
    pushtoStudent (info) {
      console.log(info);
      this.$router.push({ 'name': 'StudentInClass', query: { classname: info.name, classid: info.id } })
    },
    async submitClassInfo () {
      const res = await addClass(this.classForm)
      if (res.status !== 201) return this.$message.error('添加失败')
      this.getClassesData()
      this.dialogVisible = false
      this.$message.success('添加成功！')
    },
    editclass (info) {
      console.log(info);
      this.classForm = {
        id: info.id,
        name: info.name,
        slogan: info.slogan,
      }
      this.editDialogVisible = true
    },
    async submiteditClassInfo () {
      const res = await editClass(this.classForm.id, this.classForm)
      // console.log(res);
      if (res.status === 200) {
        this.$message.success('修改成功！')
        this.getClassesData()

      }
      else {
        this.$message.error('修改失败！')
      }
      this.editDialogVisible = false
    },
    handleDelete (id) {
      console.log(id);
      this.$confirm('是否删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await delClass(id)
        this.getClassesData()
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    multiplyDel () { }
  }
}

</script>

<style lang='sass' scoped>
.add-singer
  margin-top: 1rem
.class-table
  width: 80%
  margin-top: 1rem
.el-icon-plus
  padding-right: .3rem
.el-pagination
  margin-left: 20rem
  margin-top: 1rem
.singer-introduction
  height: 100px
  overflow: scroll
.el-upload
  .update-picture
    margin-top: .5rem
.el-row
  margin: 2rem 0
  .el-col
    border-radius: 4px
    .el-icon-delete
      margin-right: .5rem
</style>